//1. tasks 数据结构
// let tasks = [
//     { id: 1, text: "睡觉", completed: false },
//     { id: 2, text: "吃饭", completed: true },
//     { id: 3, text: "打豆豆", completed: false }
// ]
let tasks=getLoalStorage()||[]
console.log(tasks);

//2. 获取元素
let addBtn = document.querySelector(".addtask .addbtn")
let inputText = document.querySelector(".addtask input")
let ul = document.querySelector(".tasklist ul")
let category = document.querySelector('.category')
let inputSearch = document.querySelector('.search input')




//3. 事件添加

// window onload 事件
window.addEventListener('load', function () {
    // 渲染
    renderTasks(tasks)
})

// 添加按钮
addBtn.addEventListener('click', function () {
    if (inputText.value.trim() != "") {
        // 不为空
        // 添加数据
        // 1.产生数据-task对象
        // 数组最后一个值+1
        let id
        if (tasks.length) {
            id = tasks[tasks.length - 1].id + 1
        } else {
            id=1
        }
        

        const task = { id: id, text: inputText.value, completed: false }
        // 2.把对象放到tasks数组中
        tasks.push(task)
        // 3.显示
        console.log(task);
        saveToLoalStorage()
        // 4.渲染
        renderTasks(tasks)
    } else {
        // 输入框为空
        window.alert("请输入添加任务信息！")
    }


})

// category添加事件-filter 判断是哪个按钮--事件委托
category.addEventListener('click', function (e) {
    if (e.target.tagName == "BUTTON") {
        // 获取自定义属性中的值
        const filter = e.target.dataset.filter
        // 渲染
        renderTasks(filterTasks(tasks, filter))

    }
})
// 搜索框enter后提交数据
inputSearch.addEventListener('keydown', function (e) {
    // 当按下回车键
    if (e.key === "Enter") {
        // 判断搜索框是否为空
        if (inputSearch.value.trim() != "") {
            // 拿搜索框中的值和数组中每个元素的text的值进行搜索  得到一个数组
            let searchTasks = tasks.filter(task => task.text.includes(inputSearch.value.trim()))
            // 渲染
            renderTasks(searchTasks)
        } else {
            // 搜索框为空
            window.alert('请在搜索框中输入搜索信息！')
        }

    }
})

// 使用事件委托处理删除操作
ul.addEventListener('click', function (e) {
    removeTask(e)
    changeStatus(e)
    editTask(e)
})
//4. 函数
function renderTasks(tasks) {

    // 任务列表的渲染
    // 清空现有ul中的html
    ul.innerHTML = ''
    tasks.forEach(task => {
        // 创建一个元素
        const li = document.createElement('li')
        // 修改元素的html内容
        li.innerHTML = `
                    <div class="left">
                        <input type="checkbox" data-id="${task.id}" ${task.completed ? 'checked' : ''}>
                        <span class=${task.completed ? 'line' : ''}>${task.text}</span>
                    </div>
                    <div class="btn-group">
                        <button class="editBtn" data-id="${task.id}">编辑</button>
                        <button class="delBtn" data-id="${task.id}">删除</button>
                    </div>`


        // 修改li中checkbox的checked属性
        // const input=li.querySelector('input')
        // input.checked = task.completed
        // console.log(task.completed);

        // 找删除按钮
        // const delBtn = li.querySelector('.delBtn')
        // 绑定删除函数
        // delBtn.onclick =()=>removeTask(task.id)

        // delBtn.addEventListener('click', function (e) {
        //     removeTask(task.id, e)
        // })

        // 把元素放到ul中
        ul.appendChild(li)
        

    });
    updateCount()
}






// input:
/*
功能：分类过滤函数
输入：tasks-所有任务，filter[all,completed,uncompleted]
输出：过滤后的任务
*/
function filterTasks(tasks, filter) {
    switch (filter) {
        case "completed":
            return tasks.filter(task => task.completed)

        case "uncompleted":
            return tasks.filter(task => !task.completed)

        default:
            return tasks

    }

}

// 改变task的完成属性值
function changeStatus(e) {
    // let li;
    if (e.target.nodeName == "INPUT") {
        // 修改数据
        // 获取task的id值
        const id = e.target.dataset.id
        console.log(id);

        const task = tasks.find(task => task.id == id)
        console.log(task);
        console.log(e.target.checked);
        task.completed = e.target.checked
        saveToLoalStorage()
        // 修改后面文本的样式
        e.target.parentElement.children[1].classList.toggle('line')
        updateCount()
    }
}

// 删除函数
function removeTask(e) {
    let li;
    if (e.target.tagName == "BUTTON" && e.target.className == "delBtn") {
        // 删除数据
        // 获取task的id值
        const id = e.target.dataset.id
        tasks = tasks.filter(task => task.id != id)
        saveToLoalStorage()
        // 交互
        // 获取包含删除按钮的li元素
        li = e.target.parentElement.parentElement

        // 自己删除自己
        // li.remove()

        // 在父元素中删除孩子
        ul.removeChild(li)
        updateCount()
    }
}

// 编辑函数
function editTask(e) {
    let li;
    if (e.target.tagName == "BUTTON" && e.target.className == "editBtn") {
        // 删除数据
        // 获取task的id值
        const id = e.target.dataset.id
        const task = tasks.find(task => task.id == id)
        console.log(id);
        console.log(task);

        showEditAlert(id, task.text)

    }
}

// 
function updateCount() {
    // 底部统计数据的渲染
        // 生成统计数据
        let all = tasks.length
        let completed = tasks.filter(task => task.completed).length
        let uncompleted = all - completed

        // 修改对应元素的数据 -(1)-
        // const spans = document.querySelectorAll('.footer span');
        // spans[0].textContent = `全部 ${all}`
        // spans[1].textContent = `已完成 ${completed}`
        // spans[2].textContent = `未完成 ${uncompleted}`

        // 修改对应元素数据另外的方法 -(2)-
        document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`
        document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`
        document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`
}
// 把数据保存到本地的函数
function saveToLoalStorage() {
    localStorage.setItem('tasks',JSON.stringify(tasks))
}
// 获取本地保存的函数
function getLoalStorage() {
    return JSON.parse(localStorage.getItem('tasks'))
}




